<template>
	<!-- 产品询价 -->
	<view class="p-2 bg-white h_100" @click="popupShow = false">
		<view class="font-weight-bolder">
			<view class="text-center">{{ msgdata.product_name || '' }}</view>
			<!-- <view v-if="type == 2" class="text-center">{{ msgdata.product_name || '' }}</view>
			<view v-else>
				<text class="h4">{{ msgdata.product_name || '' }}：</text>
				<view class="position-relative">
					<view class="select_box flex mt-2" @click.stop="popupShow = !popupShow">
						<text class="tit h6 c_6 px-1 text_hidden1">{{ modelName }}</text>
						<u-icon style="margin-top: 5rpx;" name="arrow-downward" color="#999999" size="15"></u-icon>
					</view>
					<view class="popup h6 c_6 text-center py-1 px-2 shadow" v-show="popupShow">
						<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="true">
							<view :class="{ c_main: item.product_name == modelName }" v-for="item of msgdata.list" :key="item.id" @click.stop="modelChange(item)">
								<view class="py">{{ item.product_name }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="mt-4">
			<text class="h4 font-weight-bolder">发送请求给：</text>
			<view class="text-center h4 py-1">{{ msgdata.company_name }}</view>
		</view>
		<view class="mt-4">
			<text class="h4 font-weight-bolder">您的联系信息：</text>
			<view class="form_box">
				<u--form labelPosition="left" :model="infoFrom" :rules="rules" ref="infoFrom" labelWidth="70" labelAlign="center">
					<u-form-item label="姓 名" prop="sign_name"><u--input v-model="infoFrom.sign_name" maxlength="10" clearable></u--input></u-form-item>
					<u-form-item label="公司名称" prop="sign_company"><u--input v-model="infoFrom.sign_company" maxlength="20" clearable></u--input></u-form-item>
					<u-form-item label="电子邮件" prop="sign_email"><u--input v-model="infoFrom.sign_email" maxlength="30" clearable></u--input></u-form-item>
					<u-form-item label="电  话" prop="sign_phone"><u--input v-model="infoFrom.sign_phone" maxlength="11" clearable></u--input></u-form-item>
					<u-form-item label="Q  Q" prop="sign_qq"><u--input v-model="infoFrom.sign_qq" maxlength="15" clearable></u--input></u-form-item>
					<u-form-item label="地  区" prop="sign_address"><u--input v-model="infoFrom.sign_address" maxlength="30" clearable></u--input></u-form-item>
				</u--form>
			</view>
		</view>
		<view class="mt-4" style="margin-bottom: 150rpx;">
			<text class="h4 font-weight-bolder">留言：</text>
			<view class="my-2"><u--textarea v-model="infoFrom.content" placeholder="请输入留言"></u--textarea></view>
		</view>
		<view class="bottom_box bg-white p-2"><button class="send_btn bg_main h4 text-white font-weight-bolder mt-3" @click="submit">发送</button></view>
	</view>
</template>

<script>
import { getAdvisory, postAdvisory } from '@/api/home/nav/product_data.js';
export default {
	data() {
		return {
			infoFrom: {
				sign_name: '', //姓名
				sign_company: '', //公司名称
				sign_email: '', //电子邮件
				sign_phone: '', //电话
				sign_qq: '', //qq
				sign_address: '', //地区
				content: '' //附加评论
			},
			rules: {
				sign_name: [
					{
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				sign_company: [
					{
						type: 'string',
						required: true,
						message: '请输入公司名称',
						trigger: ['blur', 'change']
					}
				],
				sign_email: [
					{
						type: 'string',
						required: true,
						message: '请输入电子邮件',
						trigger: ['blur', 'change']
					},
					{
						message: '请填写正确的邮箱',
						pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
						trigger: ['blur']
					}
				],
				sign_phone: [
					{
						type: 'string',
						required: true,
						message: '请输入电话',
						trigger: ['blur', 'change']
					},
					{
						message: '请填写11位电话号',
						pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
						trigger: ['blur']
					}
				],
				sign_qq: [
					{
						type: 'string',
						required: true,
						message: '请输入QQ',
						trigger: ['blur', 'change']
					}
				],
				sign_address: [
					{
						type: 'string',
						required: true,
						message: '请输入地区',
						trigger: ['blur', 'change']
					}
				]
			},
			popupShow: false,
			msgdata: {},
			modelName: '', //型号名
			modelId: '', //型号id
			productId: '', //产品id
			type: 1
		};
	},
	onReady() {
		this.$refs.infoFrom.setRules(this.rules);
	},
	onLoad(option) {
		this.type = option.type;
		this.getInfo(option.id);
		this.productId = option.id;
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		// 选择型号
		// modelChange(val) {
		// 	// console.log(val);
		// 	this.modelName = val.product_name;
		// 	this.modelId = val.id;
		// 	this.popupShow = !this.popupShow;
		// },
		getInfo(val) {
			let msg = {
				id: val,
				type: this.type
			};
			getAdvisory(msg)
				.then(res => {
					// console.log('产品询价', res);
					if (res.code == 0) {
						this.msgdata = res.data;
						// if (res.data.list && res.data.list.length >= 1) {
						// 	res.data.list.forEach(item => {
						// 		if (item.id == res.data.related_id) {
						// 			this.modelName = item.product_name;
						// 			this.modelId = item.id;
						// 		}
						// 	});
						// }
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取产品询价数据失败', err);
				});
		},
		// 发送
		submit() {
			this.$refs.infoFrom
				.validate()
				.then(res => {
					if (!uni.getStorageSync('userInfo').hasLogin) {
						this.toLogin(); // 未登录
					} else {
						let msg = {
							related_id: this.productId,
							token: uni.getStorageSync('userInfo').token || '',
							uid: this.msgdata.uid,
							mid: this.msgdata.mid, //型号id
							product_model: this.msgdata.product_name, //型号
							product_type: this.type,
							...this.infoFrom
						};
						postAdvisory(msg)
							.then(res => {
								// console.log('发送询价', res);
								if (res.code == 0) {
									uni.$u.toast('询价成功，请耐心等待回复');
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 1000);
								} else {
									uni.$u.toast(res.msg);
								}
							})
							.catch(err => {
								console.log('发送询价失败', err);
							});
					}
				})
				.catch(errors => {
					uni.$u.toast('请正确填写名片信息');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.select_box {
	width: 100%;
	height: 56rpx;
	background-color: #ededed;
	text-align: center;
	line-height: 56rpx;
	// position: relative;
	.tit {
		width: calc(100% - 50rpx);
	}
}

.popup {
	width: 100%;
	max-height: 300rpx;
	background-color: #f7f7f7;
	position: absolute;
	top: 60rpx;
	overflow: hidden;
	.scroll-Y {
		height: 300rpx;
	}
}
::v-deep .u-input--radius,
.u-input--square {
	// width: 570rpx;
	height: 60rpx;
	background: #ffffff;
	border: 1px solid #cfcfcf;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.bottom_box {
	width: 100%;
	height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	.send_btn {
		height: 90rpx;
		line-height: 90rpx;
		margin-top: -10rpx;
	}
}
::v-deep .form_box .u-input__content__field-wrapper__field {
	height: 60rpx !important;
}
</style>
